<template>
  <div class="search-forbm">
    <el-form :inline="true" :model="formInline" size="small" class="demo-form-inline">
      <el-form-item :label="$t(`form.classificationName`)">
        <el-input
          size="small"
          v-model="formInline.name"
          :placeholder="$t(`form.classificationName`)"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t(`form.state`)">
        <el-select
          size="small"
          v-model="formInline.status"
          :placeholder="$t(`form.state`)"
          clearable
        >
          <el-option :label="$t('category.normal')" value="1"></el-option>
          <el-option :label="$t('category.stop')" value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item :label="$t(`form.remarks`)">
        <el-input
          size="small"
          v-model="formInline.remark"
          :placeholder="$t(`form.remarks`)"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSearch">{{
          $t(`button.search`)
        }}</el-button>
        <el-button size="small" @click="resetForm('numberValidateForm')">{{
          $t(`button.reset`)
        }}</el-button>
      </el-form-item>
      <el-button
        v-limit="'LCZX:LCKZ:LCFL:ADD'"
        size="small"
        type="primary"
        @click="onAddClassify($t('category.add'))"
        >{{ $t(`button.add`) }}</el-button
      >
    </el-form>
  </div>
  <el-dialog :title="dialogTitle" v-model="dialogFormVisible" destroy-on-close>
    <el-form :model="form" ref="form" :label-position="left" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('category.top')">
            <el-popover placement="bottom" :width="200" trigger="click">
              <el-tree
                :data="listCalssify"
                :props="defaultProps"
                @node-click="handleNodeClick"
              ></el-tree>
              <template #reference>
                <el-input v-model="form.parName"></el-input>
              </template>
            </el-popover> </el-form-item
        ></el-col>

        <el-col :span="12">
          <el-form-item :label="$t('form.classificationName')" prop="name">
            <el-input v-model="form.name"></el-input></el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item :label="$t('category.code')" :model="form.code" prop="code">
            <el-input v-model="form.code"></el-input></el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item :label="$t('category.index')" :model="form.orderBy" prop="order_by">
            <el-input type="number" v-model="form.orderBy"></el-input></el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item :label="$t('category.remark')">
            <el-input
              type="textarea"
              :rows="10"
              :placeholder="$t('category.input')"
              v-model="form.remark"
            >
            </el-input></el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="onSubmit('form')">{{ $t('common.ok') }}</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="listCalssifyVisble"> list </el-dialog>
  <Tables
    :loading="isLoading"
    :tableData="tableData"
    :columnData="columnData"
    :othercolumnData="othercolumnData"
    :pageOption="pageOption"
  />
</template>

<script>
import Tables from '@/components/Table.vue'
// import TreeSelect from "@components/TreeSelect.vue";

import { createNamespacedHelpers } from 'vuex'
import { ElMessage } from 'element-plus'

const { mapActions } = createNamespacedHelpers('flowClassifyStore')

export default {
  name: 'CategoryManagement',
  components: {
    Tables,
  },
  data() {
    return {
      isLoading: false,
      dialogFormVisible: false,
      listCalssifyVisble: false,
      listCalssify: [],
      dialogTitle: '',
      valueId: null,
      formInline: {
        name: '',
        // status: null,
        remark: '',
      },
      parName: '',
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      form: {
        parId: '',
        parName: '',
        name: '',
        code: 0,
        orderBy: 0,
        remark: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$i18n.t('category.validate.name'),
            trigger: 'blur',
          },
        ],
        code: [
          {
            required: true,
            message: this.$i18n.t('category.validate.code'),
            trigger: 'blur',
          },
        ],
        orderBy: [
          {
            required: true,
            message: this.$i18n.t('category.validate.index'),
            trigger: 'blur',
          },
        ],
      },
      columnData: [
        { title: 'form.classificationName', prop: 'name', sortable: false },
        { title: this.$i18n.t('category.code'), prop: 'code', sortable: false },
        { title: this.$i18n.t('category.remark'), prop: 'remark', sortable: false },
        { title: this.$i18n.t('category.index'), prop: 'orderBy', sortable: true },
        { title: this.$i18n.t('category.updateTime'), prop: 'modifyTime', sortable: true },
        { title: this.$i18n.t('category.updateName'), prop: 'modifyBy', sortable: false },
      ],
      othercolumnData: [
        {
          title: this.$i18n.t('category.operate'),
          prop: this.$i18n.t('category.operate'),
          list: [
            {
              title: this.$i18n.t('common.edit'),
              fn: this.handleEdit,
              limit: 'LCZX:LCKZ:LCFL:EDIT',
            },
            // { title: "停用", fn: this.stopUsing },
            {
              title: this.$i18n.t('common.del'),
              fn: this.handleDelete,
              limit: 'LCZX:LCKZ:LCFL:DELETE',
            },
            {
              title: this.$i18n.t('category.addNext'),
              fn: this.addNextLevel,
              limit: 'LCZX:LCKZ:LCFL:ADDSUB',
            },
          ],
        },
      ],
      pageOption: {
        pageNum: 1,
        pageChange: this.pageChange,
        total: 0,
      },
      tableData: [],
      props: {
        value: 'id', // ID字段名
        label: 'name', // 显示名称
        children: 'children', // 子级字段名
      },
    }
  },
  methods: {
    ...mapActions(['getFlowList', 'deleteFlowById', 'addFlow', 'pageClassify', 'updateClassify']),
    pageChange(page) {
      this.searchClassify({
        pageOption: {
          pageNum: page,
          pageSize: 10,
        },
        data: this.formInline,
      })
    },
    handleNodeClick(data) {
      this.form.parName = data.name
      this.form.parId = data.id
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.dialogTitle === this.$i18n.t('category.edit')) {
            let res = await this.updateClassify(this.form)
            if (res.code === 200) {
              ElMessage.success({
                message: res.msg,
                type: 'success',
              })
              this.dialogFormVisible = false
              this.searchClassify({
                pageOption: {
                  pageNum: 1,
                  pageSize: 10,
                },
                data: {},
              })
            }
          } else {
            let res = await this.addFlow(this.form)
            if (res.code === 200) {
              ElMessage.success({
                message: res.msg,
                type: 'success',
              })
              this.dialogFormVisible = false
              this.searchClassify({
                pageOption: {
                  pageNum: 1,
                  pageSize: 10,
                },
                data: {},
              })
            } else {
              ElMessage.error({
                message: res.msg,
                type: 'warning',
              })
            }
          }
        } else {
          return false
        }
      })
    },
    async getList() {
      const res = await this.getFlowList()
      this.listCalssify = res
    },
    async searchClassify(pageOption) {
      const res = await this.pageClassify(pageOption)
      this.tableData = res.records
      this.pageOption.total = res.total
    },
    /**
     * @description: 编辑按钮
     * @param {*} index 下表
     * @param {*} row 行内数据
     * @return {*}
     */
    handleEdit(index, row) {
      console.log(index, row)
      this.dialogFormVisible = true
      this.dialogTitle = '编辑流程分类'
      this.form = Object.assign({}, row)
      this.form.parName = row.parName
      delete this.form.children
      delete this.form.createTime
      delete this.form.modifyTime
    },
    // openList() {},
    async handleDelete(index, row) {
      this.$confirm(this.$i18n.t('category.hint.delete'), this.$i18n.t('common.hint'), {
        confirmButtonText: this.$i18n.t('common.ok'),
        cancelButtonText: this.$i18n.t('common.cancel'),
        type: 'warning',
      }).then(async () => {
        const res = await this.deleteFlowById({ id: row.id })
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg,
          })
          this.searchClassify({
            pageOption: {
              pageNum: 1,
              pageSize: 10,
            },
            data: {},
          })
        }
      })
    },
    onAddClassify(title) {
      this.dialogFormVisible = true
      this.dialogTitle = title
      this.resetForm()
    },
    onSearch() {
      this.isLoading = true
      this.searchClassify({
        pageOption: {
          pageNum: 1,
          pageSize: 10,
        },
        data: this.formInline,
      }).then((res) => {
        this.isLoading = false
      })
    },
    async stopUsing(index, row) {
      var data = {
        id: row.id,
        status: 0,
      }
      this.$confirm(this.$i18n.t('category.hint.stop'), this.$i18n.t('common.hint'), {
        confirmButtonText: this.$i18n.t('common.ok'),
        cancelButtonText: this.$i18n.t('common.cancel'),
        type: 'warning',
      })
        .then(async () => {
          let res = await this.updateClassify(data)
          if (res.code === 200) {
            ElMessage.success({
              message: res.msg,
              type: 'success',
            })
            this.searchClassify({
              pageOption: {
                pageNum: 1,
                pageSize: 10,
              },
              data: {},
            })
          }
        })
        .catch()
    },
    resetForm() {
      this.form = {}
      this.formInline = {}
      this.searchClassify({
        pageOption: {
          pageNum: 1,
          pageSize: 10,
        },
        data: {},
      })
    },
    /**
     * @description: 添加下一级
     * @param {*} index
     * @param {*} row
     * @return {*}
     */
    addNextLevel(index, row) {
      this.dialogFormVisible = true
      this.dialogTitle = this.$i18n.t('category.add')
      this.form = {}
      this.form.parId = row.id
      this.form.parName = row.name
    },
    getValue(value) {
      this.valueId = value
      console.log(value)
    },
  },
  mounted() {
    this.getList()
    this.isLoading = true
    this.searchClassify({
      pageOption: {
        pageNum: 1,
        pageSize: 10,
      },
      data: {},
    }).then((res) => {
      this.isLoading = false
    })
  },
}
</script>
<style scoped lang="scss">
/* @import url(); 引入scss类 */
.search-form {
  margin-top: 15px;
}
</style>
